import React from 'react';
import { CardCarousel, Card } from '../../src/components/CardCarousel';

// 示例数据
const sampleData = [
  { id: 1, title: '产品 1', description: '这是第一个产品的描述', price: '¥99', image: '🛍️' },
  { id: 2, title: '产品 2', description: '这是第二个产品的描述', price: '¥199', image: '📱' },
  { id: 3, title: '产品 3', description: '这是第三个产品的描述', price: '¥299', image: '💻' },
  { id: 4, title: '产品 4', description: '这是第四个产品的描述', price: '¥399', image: '🎮' },
  { id: 5, title: '产品 5', description: '这是第五个产品的描述', price: '¥499', image: '📷' },
];

const CardCarouselDemo: React.FC = () => {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 组件介绍 */}
        <div className="mb-12">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">CardCarousel 卡片切换组件</h2>
          <p className="text-lg text-gray-600 mb-6">
            一个功能强大的卡片切换组件，支持多种配置选项和自定义样式。
          </p>
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex">
              <div className="flex-shrink-0">
                <svg className="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
              </div>
              <div className="ml-3">
                <h3 className="text-sm font-medium text-blue-800">
                  提示
                </h3>
                <div className="mt-2 text-sm text-blue-700">
                  <p>该组件基于 React 和 TypeScript 开发，支持 Tailwind CSS 样式定制。</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 基础用法 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">基础用法</h2>
          <p className="text-gray-600 mb-6">
            使用 <code className="bg-gray-100 px-2 py-1 rounded text-sm">CardCarousel</code> 和 <code className="bg-gray-100 px-2 py-1 rounded text-sm">Card</code> 组件创建基本的卡片切换效果。
          </p>
          
          <div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
            <div className="flex items-center justify-center">
              <CardCarousel 
                data={sampleData} 
                visibleCount={3} 
                defaultIndex={2}
                cardWidth={120}
                className="w-full"
              >
                {sampleData.map((item, index) => (
                  <Card key={item.id} index={index}>
                    <div className="w-64 h-80 bg-white rounded-xl shadow-lg border border-gray-200 flex flex-col items-center justify-center p-6 transition-all duration-300 ease-in-out hover:shadow-xl card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl card-carousel-active:border-blue-300">
                      <div className="text-6xl mb-4">{item.image}</div>
                      <h3 className="text-xl font-bold mb-2 text-gray-800">{item.title}</h3>
                      <p className="text-sm text-gray-600 text-center mb-4">{item.description}</p>
                      <div className="text-2xl font-bold text-blue-600">{item.price}</div>
                      <div className="mt-4 px-4 py-2 bg-blue-100 text-blue-600 rounded-full text-xs font-medium">
                        点击查看详情
                      </div>
                    </div>
                  </Card>
                ))}
              </CardCarousel>
            </div>
          </div>

          {/* 代码示例 */}
          <div className="bg-gray-900 rounded-lg p-4">
            <pre className="text-sm text-gray-300 overflow-x-auto">
            <code>{`import { CardCarousel, Card } from 'cxl-react-components';

const data = [
  { id: 1, title: '产品 1', description: '描述', price: '¥99', image: '🛍️' },
  // ... 更多数据
];

<CardCarousel 
  data={data} 
  visibleCount={3} 
  defaultIndex={2}
  cardWidth={120}
>
  {data.map((item, index) => (
    <Card key={item.id} index={index}>
      <div className="w-64 h-80 bg-white rounded-xl shadow-lg">
        {/* 卡片内容 */}
      </div>
    </Card>
  ))}
</CardCarousel>`}</code>
            </pre>
          </div>
        </div>

        {/* 可见数量配置 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">可见数量配置</h2>
          <p className="text-gray-600 mb-6">
            通过 <code className="bg-gray-100 px-2 py-1 rounded text-sm">visibleCount</code> 属性控制同时显示的卡片数量。
          </p>
          
          <div className="grid grid-cols-1 gap-8">
            {/* 显示1张卡片 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">单卡片模式</h3>
              <p className="text-sm text-gray-600 mb-4">visibleCount={1}</p>
              <div className="flex items-center justify-center">
                <CardCarousel 
                  data={sampleData} 
                  visibleCount={1} 
                  defaultIndex={2}
                  cardSpacing={100}
                  cardWidth={120}
                  className="w-full"
                >
                  {sampleData.map((item, index) => (
                    <Card key={item.id} index={index}>
                      <div className="w-40 h-48 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg text-white flex items-center justify-center p-4 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
                        <div className="text-3xl mr-4">{item.image}</div>
                        <div>
                          <h4 className="text-lg font-bold">{item.title}</h4>
                          <p className="text-sm opacity-90">{item.price}</p>
                        </div>
                      </div>
                    </Card>
                  ))}
                </CardCarousel>
              </div>
            </div>

            {/* 显示5张卡片 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">多卡片模式</h3>
              <p className="text-sm text-gray-600 mb-4">visibleCount={3}</p>
              <div className="flex items-center justify-center">
                <CardCarousel 
                  data={sampleData} 
                  visibleCount={3} 
                  defaultIndex={2}
                  cardSpacing={80}
                  cardWidth={120}
                  className="w-full"
                >
                  {sampleData.map((item, index) => (
                    <Card key={item.id} index={index}>
                      <div className="w-40 h-48 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg text-white flex flex-col items-center justify-center p-3 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
                        <div className="text-3xl mb-2">{item.image}</div>
                        <h4 className="text-sm font-bold text-center">{item.title}</h4>
                        <p className="text-xs text-center opacity-90">{item.price}</p>
                      </div>
                    </Card>
                  ))}
                </CardCarousel>
              </div>
            </div>

            {/* 显示5张卡片 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">多卡片模式</h3>
              <p className="text-sm text-gray-600 mb-4">visibleCount={5}</p>
              <div className="flex items-center justify-center">
                <CardCarousel 
                  data={sampleData} 
                  visibleCount={5} 
                  defaultIndex={2}
                  cardSpacing={80}
                  cardWidth={120}
                  className="w-full"
                >
                  {sampleData.map((item, index) => (
                    <Card key={item.id} index={index}>
                      <div className="w-40 h-48 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-lg text-white flex flex-col items-center justify-center p-3 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
                        <div className="text-2xl mb-1">{item.image}</div>
                        <h4 className="text-sm font-bold text-center">{item.title}</h4>
                      </div>
                    </Card>
                  ))}
                </CardCarousel>
              </div>
            </div>
          </div>
        </div>

        {/* 间距效果演示 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">间距效果演示</h2>
          <p className="text-gray-600 mb-6">
            展示不同 <code className="bg-gray-100 px-2 py-1 rounded text-sm">cardSpacing</code> 值的效果。
          </p>
          
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* 间距为0 - 刚好并排 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">刚好并排</h3>
              <p className="text-sm text-gray-600 mb-4">cardSpacing={0}</p>
              <div className="flex items-center justify-center">
                <CardCarousel 
                  data={sampleData.slice(0, 3)} 
                  visibleCount={3} 
                  defaultIndex={1}
                  cardSpacing={0}
                  cardWidth={128}
                  className="w-full"
                >
                  {sampleData.slice(0, 3).map((item, index) => (
                    <Card key={item.id} index={index}>
                      <div className="w-32 h-40 bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg text-white flex flex-col items-center justify-center p-3 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
                        <div className="text-2xl mb-1">{item.image}</div>
                        <h4 className="text-sm font-bold text-center">{item.title}</h4>
                      </div>
                    </Card>
                  ))}
                </CardCarousel>
              </div>
            </div>

            {/* 负间距 - 重叠效果 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">重叠效果</h3>
              <p className="text-sm text-gray-600 mb-4">cardSpacing={-50}</p>
              <div className="flex items-center justify-center">
                <CardCarousel 
                  data={sampleData.slice(0, 3)} 
                  visibleCount={3} 
                  defaultIndex={1}
                  cardSpacing={-50}
                  cardWidth={128}
                  className="w-full"
                >
                  {sampleData.slice(0, 3).map((item, index) => (
                    <Card key={item.id} index={index}>
                      <div className="w-32 h-40 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg text-white flex flex-col items-center justify-center p-3 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
                        <div className="text-2xl mb-1">{item.image}</div>
                        <h4 className="text-sm font-bold text-center">{item.title}</h4>
                      </div>
                    </Card>
                  ))}
                </CardCarousel>
              </div>
            </div>

            {/* 大间距 - 分散展示 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">分散展示</h3>
              <p className="text-sm text-gray-600 mb-4">cardSpacing={50}</p>
              <div className="flex items-center justify-center">
                <CardCarousel 
                  data={sampleData.slice(0, 3)} 
                  visibleCount={3} 
                  defaultIndex={1}
                  cardSpacing={50}
                  cardWidth={128}
                  className="w-full"
                >
                  {sampleData.slice(0, 3).map((item, index) => (
                    <Card key={item.id} index={index}>
                      <div className="w-32 h-40 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg text-white flex flex-col items-center justify-center p-3 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
                        <div className="text-2xl mb-1">{item.image}</div>
                        <h4 className="text-sm font-bold text-center">{item.title}</h4>
                      </div>
                    </Card>
                  ))}
                </CardCarousel>
              </div>
            </div>
          </div>
        </div>

        {/* API 文档 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">API 文档</h2>
          
          {/* CardCarousel Props */}
          <div className="bg-white rounded-lg shadow-sm border mb-8">
            <div className="px-6 py-4 border-b">
              <h3 className="text-lg font-semibold text-gray-900">CardCarousel Props</h3>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性名</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">默认值</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">data</td>
                    <td className="px-6 py-4 text-sm text-gray-500">卡片数据数组</td>
                    <td className="px-6 py-4 text-sm text-gray-500">any[]</td>
                    <td className="px-6 py-4 text-sm text-gray-500">—</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">visibleCount</td>
                    <td className="px-6 py-4 text-sm text-gray-500">可见卡片数量</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">3</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">defaultIndex</td>
                    <td className="px-6 py-4 text-sm text-gray-500">默认选中卡片索引</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">0</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">cardSpacing</td>
                    <td className="px-6 py-4 text-sm text-gray-500">卡片间距（像素）</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">0</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">cardWidth</td>
                    <td className="px-6 py-4 text-sm text-gray-500">卡片宽度（像素）</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">120</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">className</td>
                    <td className="px-6 py-4 text-sm text-gray-500">自定义类名</td>
                    <td className="px-6 py-4 text-sm text-gray-500">string</td>
                    <td className="px-6 py-4 text-sm text-gray-500">—</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Card Props */}
          <div className="bg-white rounded-lg shadow-sm border">
            <div className="px-6 py-4 border-b">
              <h3 className="text-lg font-semibold text-gray-900">Card Props</h3>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性名</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">默认值</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">index</td>
                    <td className="px-6 py-4 text-sm text-gray-500">卡片索引</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">—</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">className</td>
                    <td className="px-6 py-4 text-sm text-gray-500">自定义类名</td>
                    <td className="px-6 py-4 text-sm text-gray-500">string</td>
                    <td className="px-6 py-4 text-sm text-gray-500">—</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* 配置说明 */}
        <div className="bg-blue-50 rounded-lg p-6">
          <h3 className="text-lg font-semibold mb-4 text-blue-800">配置说明</h3>
          <div className="text-sm text-blue-700 space-y-2">
            <p><strong>cardSpacing</strong> 参数用于控制卡片之间的水平间距（单位：像素）</p>
            <ul className="list-disc list-inside space-y-1 ml-4">
              <li><strong>默认值：</strong> 0px</li>
              <li><strong>间距为0：</strong> 卡片刚好并排展示，无重叠</li>
              <li><strong>负间距：</strong> 卡片会重叠展示，创造层次感</li>
              <li><strong>正间距：</strong> 卡片之间有间距，适合分散展示</li>
              <li><strong>推荐范围：</strong> -100px 到 300px</li>
            </ul>
            <p className="mt-4"><strong>cardWidth</strong> 参数用于设置卡片的基础宽度，影响间距计算</p>
            <ul className="list-disc list-inside space-y-1 ml-4">
              <li><strong>默认值：</strong> 120px</li>
              <li><strong>作用：</strong> 作为间距计算的基础宽度</li>
              <li><strong>推荐范围：</strong> 80px 到 300px</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardCarouselDemo;